<template>
  <div class="screening">
    <div class="selectlist">
      <div >综合</div>
      <div >人气</div>
      <div >价格<img src="../../static/img/list_price.png"/></div>
    </div>
    <div class="selectcheck">
      <span></span>
      <img :src="checkimg" v-on:click="checklist(checkstyle)"/>
    </div>
  </div>
</template>

<script>

export default {
  name: 'screening',
  props : [''],
  data () {
    return {
      checkstyle:'1',
      checkimg:'../../static/img/list_check2.png'
    }
  },
  methods : {
    checklist(checkstyle){
        let imgarr = ['../../static/img/list_check1.png','../../static/img/list_check2.png'];
        if(checkstyle==1){
          this.$parent.liststyle = 'proin2';
          this.checkstyle = 2;
          this.checkimg = imgarr[0];
        }else{
          this.$parent.liststyle = 'proin';
          this.checkstyle = 1;
          this.checkimg = imgarr[1];
        }
    }
  },
  mounted(){
      
  }
}

</script>

<style lang="scss" scoped>
  .screening{
    position: fixed;
    display: flex;
    top: 40px;
    width: 100%;
    height: 40px;
    background-color: #ffffff;
    z-index: 1;
    border-bottom: 1px solid #eeeeee;
    .selectlist{
      width: 80%;
      display: flex;
      justify-content: space-around;
      div{
        display:inline-block;
        line-height: 40px;
      }
    }
    .selectcheck{
      width: 20%;
      span{
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
      img{
        vertical-align: middle;
      }
    }
  }
</style>
